<template>
  <Dialog title="编辑" :show="true" @close="cancel" :width="300" height="auto" :left="uiLeft" :top="uiTop">
    <div class="box">
      <div class="item1">
        <div>是否编辑：</div>
        <div class="edit">
          <el-switch v-model="editingRef" size="small" />
          <el-button @click.stop="draw"> 重新绘制</el-button>
        </div>
      </div>

      <div class="item1">
        <div class="key">底面高程:</div>
        <el-input v-model.lazy="bottom" :disabled="editingRef" type="number" @change="changeBottom" />
      </div>
      <!-- <div class="item2">
        <div class="key"></div>
        <div>
          <el-button @click.stop="offset">偏移</el-button>
        </div>
      </div>
      <div class="item2" v-show="showSlider">
        <div class="key"></div>
        <div class="fuc">
          <el-slider v-model="offsetVal" @input="offsetChange" :min="-10" :max="10" :step="0.1" :show-tooltip="true"
            style="width: 170px" />
        </div>
      </div> -->
      <div class="item1">
        <div class="key">柱体高度:</div>
        <el-input type="number" v-model="ceilling" placeholder="请输入高度" min="" />
      </div>
    </div>
  </Dialog>
</template>
<script setup lang="ts">
import {
  createVueDisposer,
  toVR,
} from "earthsdk-ui";
import Dialog from "@/components/Dialog.vue";
import { onBeforeUnmount, ref, onMounted, watch } from "vue";
import { getProjectManager } from "@/scripts/getProjectManager";
import { ESGeoExtrudedPolygonUFMS } from "@/scripts/esobjs/ESGeoExtrudedPolygonUFMS";
import { processNum } from "@/scripts/utils";

const uiLeft = ref(document.body.clientWidth - 10 - 300);
const uiTop = document.body.clientHeight - document.body.clientHeight / 2;

const emits = defineEmits(["cancel"]);
const cancel = () => {
  emits("cancel");
};

const d = createVueDisposer(onBeforeUnmount);

const objm = getProjectManager();
const modelserManager = getProjectManager().modelserManager;
const modelser2Manager = getProjectManager().modelser2Manager;
const monomerEdit = modelser2Manager.monomerEdit as any;
const monomerInfoRef = toVR<any>(d, [monomerEdit, "monomerInfo"]);


const editPolygon = modelserManager.editPolygon;

let eSGeoExtrudedPolygonUFMS: any = ref("");
let editingRef = ref(false);

const bottom = ref(Number(monomerEdit.monomerInfo.bottom));
const ceilling = ref(processNum(Number(monomerEdit.monomerInfo.ceilling) - Number(monomerEdit.monomerInfo.bottom)));

const create = () => {
  eSGeoExtrudedPolygonUFMS.value = d.ad(
    objm.createSceneObject(ESGeoExtrudedPolygonUFMS) as ESGeoExtrudedPolygonUFMS
  );
  d.dispose(() => {
    eSGeoExtrudedPolygonUFMS.value.editing = false;
    eSGeoExtrudedPolygonUFMS.value &&
      objm.destroySceneObject(eSGeoExtrudedPolygonUFMS.value);
  });

  eSGeoExtrudedPolygonUFMS.value.fillColor = [1, 0, 0, 0.5];
  eSGeoExtrudedPolygonUFMS.value.absoluteBottom = true;
  eSGeoExtrudedPolygonUFMS.value.absoluteCeilling = true;
  eSGeoExtrudedPolygonUFMS.value.points = [...monomerEdit.monomerInfo.points];
  eSGeoExtrudedPolygonUFMS.value.bottom = Number(monomerEdit.monomerInfo.bottom);
  eSGeoExtrudedPolygonUFMS.value.ceilling = Number(monomerEdit.monomerInfo.ceilling)

  eSGeoExtrudedPolygonUFMS.value.dispose(
    eSGeoExtrudedPolygonUFMS.value.pointsChanged.disposableOn((e: any) => {
      bottom.value = processNum(editPolygon.getMinHeight(eSGeoExtrudedPolygonUFMS.value.points));
      eSGeoExtrudedPolygonUFMS.value.ceilling = processNum(Number(ceilling.value) + editPolygon.getMaxHeight(eSGeoExtrudedPolygonUFMS.value.points));

      monomerEdit.monomerInfo = {
        id: monomerInfoRef.value.id,
        name: monomerInfoRef.value.name,
        bottom: eSGeoExtrudedPolygonUFMS.value.bottom,
        ceilling: eSGeoExtrudedPolygonUFMS.value.ceilling,
        points: [...eSGeoExtrudedPolygonUFMS.value.points]
      }
    })
  );
  eSGeoExtrudedPolygonUFMS.value.dispose(
    eSGeoExtrudedPolygonUFMS.value.editingChanged.disposableOn((val: any) => {
      editingRef.value = val;
    })
  );

  // eSGeoExtrudedPolygonUFMS.value.points = monomerInfoRef.value.points;

};

watch(editingRef, (val) => {
  if (!eSGeoExtrudedPolygonUFMS.value) return;
  eSGeoExtrudedPolygonUFMS.value.editing = val;
  if (!editingRef.value) {
    flat()
  }
});



// 重新绘制
const draw = () => {
  if (editingRef.value) {
    editingRef.value = false;
  }
  eSGeoExtrudedPolygonUFMS.value.points = [];
  editingRef.value = true;

  ceilling.value = 10;

};

// 纯平
const flat = () => {
  ceilling.value = processNum(Number(ceilling.value) + editPolygon.getMaxHeight(eSGeoExtrudedPolygonUFMS.value.points) - editPolygon.getMinHeight(eSGeoExtrudedPolygonUFMS.value.points))

  eSGeoExtrudedPolygonUFMS.value.points =
    eSGeoExtrudedPolygonUFMS.value.points.map((p: [number, number, number]) => [
      p[0],
      p[1],
      editPolygon.getMinHeight(eSGeoExtrudedPolygonUFMS.value.points),
    ]);
};


const updateParam = () => {
  eSGeoExtrudedPolygonUFMS.value.bottom = Number(bottom.value);
  eSGeoExtrudedPolygonUFMS.value.ceilling = processNum(
    Number(ceilling.value) +
    editPolygon.getMaxHeight(eSGeoExtrudedPolygonUFMS.value.points));

  monomerEdit.monomerInfo = {
    id: monomerInfoRef.value.id,
    name: monomerInfoRef.value.name,
    bottom: eSGeoExtrudedPolygonUFMS.value.bottom,
    ceilling: eSGeoExtrudedPolygonUFMS.value.ceilling,
    points: [...eSGeoExtrudedPolygonUFMS.value.points]
  }
};

// 监听顶面高度模式和变化
watch([bottom, ceilling], () => {
  updateParam();
});

const changeBottom = (val: number) => {
  // 将输入值强制转换为数字，并确保不小于 0.1
  const numValue = Number(val);
  if (!numValue || isNaN(numValue)) {
    bottom.value = 0
  }
}

watch(bottom, (newVal, oldVal) => {
  if (editingRef.value) return;
  const int = newVal - oldVal
  eSGeoExtrudedPolygonUFMS.value.points = eSGeoExtrudedPolygonUFMS.value.points.map((p: [number, number, number], i: number) => [p[0], p[1], p[2] + int])

});


onMounted(() => {
  create();
});
</script>

<style scoped>
.box {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  padding: 15px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.item1 {
  display: grid;
  grid-template-columns: 95px 1fr;
  align-items: center;
  margin-bottom: 8px;
}

.item2 {
  display: grid;
  grid-template-columns: 95px 1fr;
  align-items: center;
}

.fuc {
  display: flex;
}

.btn1 {
  display: flex;
  justify-content: flex-end;
  /* justify-content: space-between; */
}

.el-button {
  margin-left: 0px !important;
}

.edit {
  display: flex;
  gap: 20px;
  align-items: center;
}
</style>